Jquery` .find()`找不到带有value =的`document``input`

我有一个按钮,我将输入附加到HTML DOM.
稍后我有一个按钮来获取输入值,如果它们与关键字匹配.
在这个例子中"a".

HTML

Add input
Fetch value

JS

$('#btnAddInput').on('click', function() {
  $('#inputs').append('
');
  });
$('#fetchValue').on('click', function() {
  var value = $(document).find('input[value="a"]');
  console.log(value);
});

小提琴:https://jsfiddle.net/Ljrkdm53/

我了解到,如果使用Jquery将DOM添加到DOM,有时您必须使用documentas选择器来查找元素.
但在这种情况下我没有成功.

您添加的输入是在我的代码中保存到mysql中.
如果您在开始时加载所有已保存的输入,则js代码会查找值.

那么,我错过了什么？

你混淆了value与输入相关的各种东西.你并不是唯一的一个!

该value 属性指定输入的初始值.当输入的值发生变化时它不会改变,因此你附加了一个没有value属性的输入,然后输入它,它就不会突然得到一个值属性 - 所以你不能用它来搜索它.

实例上的value 属性HTMLInputElement反映了输入的当前值.

还有defaultValue属性,它反映了value属性.

如果你需要根据它的当前值找到一个输入,没有CSS选择器可以做到这一点,你需要使用更广泛的搜索和filter:

var inputsWithA = $("input").filter(function() {
    return this.value == "a";
});

这是一个快速示例,显示输入的value属性,defaultValue属性和value属性的值:

$("button").on("click", function() {
  var input = $("input");
  msg("The input's value property is: '" + input.val() + "'");
  msg("The input's defaultValue property is: '" + input.prop("defaultValue") + "'");
  msg("The input's value attribute is: '" + input.attr("value") + "'");
  
  msg("We can only use CSS with the attribute, so for instance $('input[value=\"original\"]') will find it but $('input[value=\"" + input.val() + "\"]') will not:");
  msg("$('input[value=\"original\"]') found it? " +
      ($('input[value="original"]').length ? "Yes" : "No")
  );
  msg("$('input[value=\"" + input.val() + "\"]') found it? " +
      ($('input[value="' + input.val() + '"]').length ? "Yes" : "No")
  );
});
function msg(html) {
  $("
").html(html).appendTo(document.body);
}

Type something in the input, then click the button:

Click Me